import { WeElement, define } from 'omi'

import './index.css'

const { loading , get } = require('../../../utils/util')

const api = require('../../../api/api')

define('shopping-mall', class extends WeElement {
  
  config = {
    navigationBarTitleText: '庐山西海瑶池湾度假山庄'
  }

  data = {
    car_imageUrl: [],//轮播图
    navigation:[],//导航
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1000,
    circular:true,
    cur_index:"0",//下标
    commodity: [],//商品信息
    page:"",//页数
    all_page:'',
    type_id:""
  }
  //跳转详情页
  to_shopping_details=(e)=>{
    wx.navigateTo({
      url: '../shopping_details/details?commo_id=' + this.data.commodity[e.currentTarget.dataset.index].goods_commonid + "&commo_img=" + this.data.commodity[e.currentTarget.dataset.index].goods_image,
    })
    wx.showLoading({
      title: '正在跳转',
    })
  }
  // 切换导航 
  choose = (e)=>{
    this.data.cur_index = e.currentTarget.dataset.index;
    this.getShopCommApi( this.data.navigation[this.data.cur_index].gc_id )
  }
  onPullDownRefresh() {
    console.log('onPullDownRefresh', new Date())
  }

  onPageScroll() {
    console.log('onPageScroll')
  }
  //获取商城首页轮播图
  getShopCar(){
    let that = this;
    wx.request({
      url: api.ShopGoodsCarUrl,
      method:"GET",
      success(res){
        that.data.car_imageUrl = res.data.data;
        that.update();
      }
    })
  }
  //获取商城导航信息
  getShopNavApi(){
    let that = this;
    wx.request({
      url: api.ShopTypeListUrl,
      method:"GET",
      success(res){                
        that.data.navigation = res.data.data;
        that.update();       
        console.log("导航", that.data.navigation)
      }
    })
  }
  //      
  /** 获取商城主页商品信息
   *
   * @param {number} [type_id=1]        类型id
   * @param {number} [page=1]           页数
   * @param {boolean} [isPush=false]    替换数组或者追加数组
   */
  getShopCommApi = (type_id =1 ,page=1 , isPush = false  )=>{
    loading();
    get( api.ShopListUrl , {type_id, page}, ).then( (res)=>{        
      if(isPush){
        this.data.commodity.push(...res.data.shop_list)
      }else{
        this.data.commodity = res.data.shop_list;
      }
      this.data.page = res.data.page;
      this.data.all_page = res.data.all_page;
      this.update();
      console.log("商品", this.data.commodity)
      wx.hideLoading();
    })
  }
  install() {
    this.getShopNavApi();
    this.getShopCommApi();
    this.getShopCar();
  }
  // 到底加载分页
  onReachBottom() {
    if(this.data.all_page > this.data.page){
      this.getShopCommApi(this.data.navigation[this.data.cur_index].gc_id , ++this.data.page, true)
    }   
  }

  render() {
    let { navigation, isActive, commodity, imageUrl,cur_index} = this.data
    return (
      <view>
        <swiper
          indicator-dots={indicatorDots}
          autoplay={autoplay}
          interval={interval}
          duration={duration}
          circular={circular}
          indicator-color="rgba(255,255,255,0.5)"
          indicator-active-color="#fff"
          class="slide-all"
        >
          {
           car_imageUrl.map((item,index)=>(
              <block key={index}>
                <swiper-item class="slide-box">
                  <image class="slide-image" src={item.goods_image} />
                </swiper-item>
              </block>
              )
            ) 
          }
        </swiper>
        <view class="navigation_box_all">
        {
          navigation.map((item,index)=>(            
              <view class="navigation_box" bindtap={choose} data-index={index} key={index}>
                <view class="img_box"><image src={item.full_diagram}/></view>
                <text class={cur_index == index ? "active" : "no_active"}>{item.gc_name}</text>
            </view>
          ))           
        }          
        </view>
        <view class="commodity_all">
          { commodity.length > 0 ?
            commodity.map((item, index) => {
              return <view class="commodity_box" bindtap={to_shopping_details} key={index} data-index={index}>
                <view class="commodity_img_box">
                  <image lazy-load='true' src={item.goods_image} />
                </view>
                <view class="commodity_text">
                  <text class="commodity_title">{item.goods_name}</text>
                  {
                    item.goods_discount == 100 ? <text class="commodity_money">￥{item.goods_marketprice}起</text>:<view><text class="sale_price">折扣价:{item.goods_price}</text><text class="price">原价:{item.goods_marketprice}</text></view>
                  }                 
                  <text class="commodity_sale">已售：{item.sale_num}份</text>
                </view>
              </view>
            })
            :
            <view class='noData'>暂无商品</view>
          }
        </view>    
      </view>
    )
  }
}) 